import React from 'react'

import './ui.less'

import { Card, Spin, Icon, Alert, Switch } from 'antd';


class Loadings extends React.Component {
    state = {
        loading: false
    }
    toggle = (e) => {
        // console.log(e)
        this.setState({
            loading: e
        })
    }
    render() {
        // 自定义旋转的是什么图标
        const antIcon = <Icon type="loading" style={{ fontSize: 24 }} />
        return (
            <div>
                <Card title="Spin 用法" className="warp">
                    <Spin size="small" />
                    <Spin style={{ margin: '0 10px' }} />
                    <Spin size="large" />
                    <Spin indicator={antIcon} style={{ margin: '0 10px' }} />

                </Card>
                <Card title="Spin 内容遮罩" className="warp">
                    <Alert 
                        message="今天你学习了吗"
                        description="欢迎来到react 高级实战教程"
                        type="info"
                        style={{marginBottom: 10}}
                    />
                    <Spin spinning={this.state.loading}>
                        <Alert
                            message="今天你学习了吗"
                            description="欢迎来到react 高级实战教程"
                            type="info"
                        />
                    </Spin>
                    <div style={{ margin: '15px 0' }}>
                        开关：<Switch checked={this.state.loading} onChange={this.toggle} />
                    </div>
                    <Spin tip="加载中……">
                        <Alert style={{marginBottom: 10}}
                            message="Alert message title"
                            description="Further details about the context of this alert."
                            type="info"
                        />
                    </Spin>
                    <Spin indicator={antIcon} >
                        <Alert
                            message="Alert message title"
                            description="Further details about the context of this alert."
                            type="info"
                        />
                    </Spin>
                </Card>
            </div>
        )
    }
}

export default Loadings